<template>
    <div class="growth">
        <topBar :title="title"></topBar>
        <div class="center">
            <div class="left">
                <div>
                    <div class="square"></div>
                    <div class="html">环比增长支局TOP10</div>
                </div>
                <el-table
                    border
                    style="width: 100%"
                    :header-cell-style="{background: '#0070C0', color: '#ffffff'}"
                    :data="subData">
                    <el-table-column align="center" label="环比增长支局TOP10">
                        <el-table-column align="center" label="分局" prop="parentName"></el-table-column>
                        <el-table-column align="center" label="支局" prop="areaName"></el-table-column>
                        <el-table-column align="center" label="环比增长（万元）" prop="indexValue"></el-table-column>
                    </el-table-column>
                </el-table>
            </div>
            <div class="right">
                <div>
                    <div class="square"></div>
                    <div class="html">环比增长客户TOP10</div>
                </div>
                <el-table
                    border
                    style="width: 100%"
                    :header-cell-style="{background: '#0070C0', color: '#ffffff'}"
                    :data="cusData">
                    <el-table-column align="center" label="环比增长客户TOP10">
                        <el-table-column align="center" label="客户名" prop="custName"></el-table-column>
                        <el-table-column align="center" label="VIP归属" prop="areaName"></el-table-column>
                        <el-table-column align="center" label="环比增长（万元）" prop="indexValue"></el-table-column>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="bottom">注：支局收入剔除政企VIP客户</div>
    </div>
</template>

<script>
import topBar from "./topBar";
import {
  c5top,custtop
} from "@/api/codeIncome/analysis";
export default {
    name: "growth",
    components: {
        topBar,
    },
    props: {
        searchData: {
        type: Object,
        default: {},
        },
    },
    watch: {
        searchData: {
        handler(newName) {
            this.getCusData()
            this.getSubData()
        },
        deep: true,
        },
    },
    data() {
        return{
            title: '码号收入 – 10月环比9月TOP增长支局、客户',
            subData: [],
            cusData: []
        }
    },
    created() {},
    mounted() {
        this.getCusData()
        this.getSubData()
    },
    methods: {
        getCusData() {
            custtop({
                sign: 'UP',
                acctMonth: this.searchData.acctMonth,
                areaId: this.searchData.areaId,
            }).then((res) => {
                if (res.code == 200) {
                    this.cusData = res.data.dataList[0].data
                }
            })
        },
        getSubData() {
            c5top({
                sign: 'UP',
                acctMonth: this.searchData.acctMonth,
                areaId: this.searchData.areaId,
            }).then((res) => {
                if (res.code == 200) {
                    this.subData = res.data.dataList[0].data
                    this.title = res.data.characterList[0].text
                }
            })
        }
    }
}
</script>

<style scoped>
.growth {
    box-sizing: border-box;
    padding: 20px;
    box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 15%);
}
</style>

<style lang="scss" scoped>
.growth {
  margin-top: 20px;
}
.center{
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    .left,.right{
        width: 49%;
        >div {
            width: 100%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        .square {
            margin-top: 15px;
            margin-right: 10px;
            width: 10px;
            height: 10px;
            background: #c00000;
            transform: rotate(45deg);
        }
        .html {
            font-size: 20px;
            color: black;
            letter-spacing: 1px;
            line-height: 40px;
            font-weight: bold;
            color: #c00000;
        }
    }
}
.bottom{
    box-sizing: border-box;
    padding: 0 20px;
    margin-top: 20px;
    font-size: 12px;
    color:rgba(133, 131, 131, 0.678);
    margin-top: 10px;
}
</style>
